<template>
    <div id="hb">
        <div class="hb-icon"></div>
        <div class="hb-body">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "headerButton"
    }
</script>

<style scoped>
    #hb{
        max-width: 400px;
        cursor: pointer;
    }
    .hb-icon {
        float: left;
                height: 36px;

        background: url("../../assets/buttons/headbutton-icon.png");
        background-size: 100% 100%;
        width: 10%;
    }

    .hb-body {
        float: right;
        background: url("../../assets/buttons/headbutton-body.png");
                background-size: 100% 100%;
        font-size: larger;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;

        height: 36px;
        width: 90%;
    }

    .hb-body:hover {
        background: url("../../assets/buttons/headbutton-body-hover.png");
    }
</style>